0<template>
	<view class="container">
		<view class="no-logged" v-if="!isLogin">
			<button @click="integrals" type="primary">立即登录</button>
			<button class="mt-20" @click="go" type="primary" plain="true">现在点单</button>
		</view>
		<view v-else>
			<view class="tabs">
				<view 
					class="item" 
					:class="{active: tabIndex === index}" 
					@tap="switchTab(index)"
					v-for="(tab, index) in tabList"
					:key="index"
				>
				{{tab.name}}
				</view>
			</view>
			<view class="mt-30">	
				<!-- 订单列表 begin -->
				<swiper class="swiper" :show-scrollbar="false" v-if="orders.length > 0">
					<swiper-item @touchmove.stop="true">
						<view class="history-order">
							<swiper :show-scrollbar="false" class="history-order-swiper">
								<swiper-item @touchmove.stop="true">
									<scroll-view scroll-y="true" class="orders-scroll">
										<view class="pl-30 pr-30">
											<view 
												class="order-list border-radius-10" 
												v-for="(order, index) in orders"
												:key="index"
												@click="toDedail(order)">
													<view class="header border-b">
														<view class="fsize-32 line-black fweigh-600">{{order.storeName}}</view>
														<view class="fsize-28 line-yellow">{{order.stateName}}</view>
													</view>
													<scroll-view scroll-x>
														<view class="images">
															<view v-for="(item, index) in order.foodData" :key="index">
																<image :src="item.image"></image>
																<view class="text-align-center">x{{item.quantity}}</view>
															</view>
														</view>
													</scroll-view>
													<view class="info">
														<view class="left">
															<view>订单编号:{{ order.orderId }}</view>
															<view class="mt-10">下单时间:{{ order.orderDate }}</view>
														</view>
														<view class="right text-align-right">
															<view class="fweigh-600">
																<text class="fsize-30">￥</text>
																<text class="fsize-40">{{ order.sumAllAmount }}</text>
															</view>
															<view class="fsize-26 line-gray mt-10">共{{order.sumQuantity}}件</view>
														</view>
													</view>
													<view class="action" @click.stop>
														<!-- <button type="default" hover-class="none">查看评论</button> -->
														<!-- <button type="primary" plain hover-class="none">立即支付</button> -->
														<u-button plain v-if="order.status === 0" color="#F3C35C" text="立即支付" @click="onPayment(order.orderId)"></u-button>
													</view>
											</view>
										</view>
									</scroll-view>
								</swiper-item>
							</swiper>
						</view>
					</swiper-item>
				</swiper>
				<!-- 订单列表 end -->
				<view class="store-order-wrapper" v-else>
					<image src="/static/images/order/default_img_order.png"></image>
					<view>您还没有下单</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import { requestPayment } from '@/utils/payment'
	import { pay } from "@/common/util.js"
export default {
	data() {
		return {
			tabIndex: 0,
			tabList: [
				{name:'全部订单'},
				{name:'堂食订单'},
				{name:'外带订单'}
			],
			orderMenuIndex: 0,
			orders: [],
			searchData: {
				FType: 0, // 2 打包订单 1 堂食 0全部
				pageIndex: 0,
				pageSize: 20
			},
			loadMore: false,
		}
	},
	onLoad() {
		this.getOrders()
	},
	onShow(opt) {
		if(!uni.$u.test.isEmpty(opt)){
			if(opt.isRefresh){
				this.getOrders()
			}
			
		}
	},
	onReachBottom(){
		if(this.loadMore){
			this.getOrders()
		}
	},
	computed: {
		...mapState(['isLogin', 'stock']),
		batchInvoiceVisible() {
			return (!this.orderMenuIndex && this.orders.length) || (this.orderMenuIndex && this.storeOrders.length)
		}
	},
	methods: {
		go(){
			uni.switchTab({url: '/pages/tab_bar/classify/classify'})
		},
		toDedail(row){
			uni.navigateTo({
				// url:'/pages/order/detail?orderdes=' + encodeURIComponent(JSON.stringify(row))
				url:'/pages/order/detail?orderId=' + row.orderId
			})
		},
		async switchTab(index) {
			if(this.tabIndex === index) return
				this.tabIndex = index
				this.searchData.FType = index
				this.searchData.pageIndex = 0
				this.orders = []
				await this.getOrders()
		},
		async switchMenuTab(index) {
			if(this.orderMenuIndex === index) return
			this.orderMenuIndex = index
			await this.getOrders()
		},
		getOrders() {
			if(this.isLogin){
				this.$api.GetOrderList({...this.searchData, storeId: this.stock.id}).then(res=>{
					this.orders = [...this.orders, ...res.data.list]
					if(res.data.rowcount > this.orders.length){
						this.searchData.pageIndex++
						this.loadMore = true
					}else {
						this.loadMore = false
					}
				})
			}
			
		},
		integrals() {
			if(!this.isLogin) {
				uni.navigateTo({url: '/pages/login/login'})
			}
		},
		onPayment(orderId){
			pay(orderId)
			// let that = this
			// that.$api.OrderPay({ids: orderId, payment_code: 'wechatpay', payment_type:17, params:{}}).then(respay=>{
			// 	const params = respay.data.respData
			// 	uni.openEmbeddedMiniProgram({
			// 		appId: params.appId,
			// 		path: params.path,
			// 		success(res) {}
			// 	})
			// })
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #f6f6f6;
}
.no-logged{
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.navbar {
	height: calc(44px + var(--status-bar-height));
	/* #ifdef H5 */
	height: 44px;
	/* #endif */
	display: flex;
	background-color: #FFFFFF;
}

.talk-btn {
	height: 32px;
	margin-left: 10px;
	margin-top: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24rpx !important;
	padding: 0 20rpx;
	border-radius: 50rem !important;
	
	image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}
}

.tabs {
	height: 82rpx;
	border-top: 1px #EDEDED solid;
	display: flex;
	align-items: center;
	padding-left: 30rpx;
	
	.item {
		height: 100%;
		font-size: 30rpx;
		color: #666;
		font-weight: 400 !important;
		margin-right: 70rpx;
		display: flex;
		align-items: center;
		
		&.active {
			color: #F3C35C;
			border-bottom: 4rpx solid #F3C35C;
		}
	}
}

.swiper {
	width: 100%;
	height: calc(100vh - var(--status-bar-height) - 82rpx);
}


.history-order {
	width: 100%;
	height: 100%;
	position: relative;
	
	.menu {
		padding: 18rpx 30rpx;
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #666;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
		
		.item {
			padding: 14rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			
			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
			
			&.active {
				color: #E0A32D;
				background-color: #777;
			}
		}
	}
	
	.history-order-swiper {
		width: 100%;
		height: 100%;
	}
}

.store-order-wrapper {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	color: #777;
	line-height: 1.3rem !important;
	
	image {
		width: 400rpx;
		height: 333rpx;
		margin-bottom: 40rpx;
	}
}

.orders-scroll {
	width: 100%;
	height: 100%;
}

.order-list {
	display: flex;
	width: 100%;
	flex-direction: column;
	background-color: #fff;
	padding:30rpx;
	margin-bottom: 30rpx;
	
		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 30rpx;
		}
		
		.images {
			display: flex;
			padding: 30rpx 0;
			image {
				flex-shrink: 0;
				width: 150rpx;
				height: 112.5rpx;
			}
		}
		
		.info {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			
			.left {
				flex: 1;
				display: flex;
				flex-direction: column;
				font-size: 26rpx;
				color: #666;
			}
		}
		
		.action {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			
			button {
				margin-left: 30rpx;
				font-size: 24rpx;
			}
		}
}
</style>
